<!DOCTYPE html>
<html>
<head>
	<title>vue实例</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="./js/vue.js"></script>
	<style type="text/css">
		.ac {
			width:100px;
			height: 50px;
			background-color: pink;
			vertical-align: middle;
			margin-right: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.kk {
			display: flex;

		}
		
	</style>
</head>
<body>
	<div id="app">
		<li v-for="(item, index) of list" :key="item.id" class="ac">
			<!-- key值要唯一，尽量不使用index作为key值，尽量使用后端返回数据的id值 -->
			{{index}}---{{item.name}}
		</li>

		
			<li v-for="(item, key,index) of userInfo">
				{{key}}--{{item}}--{{index}}  <!-- 这里的key便是对象中的键名，item是值 -->
			</li>
		
		
	
	</div>




</body>
<script type="text/javascript">

	

	var vm = new Vue({
		el:"#app",
		data:{
			//若想直接通过数组下标改变数组的内容，可以这样
			//vm.$set(vm.list, 2 ,{"id":2222, "name":"mycottle"}
			//或者Vue.set(vm.list, 2 ,{"id":2222, "name":"mycottle"}
			list:[
				{
					"id":1101,
					"name":"dog"
				},
				{
					"id":1102,
					"name":"cat"
				},
				{
					"id":1103,
					"name":"duck"
				},
				{
					"id":1104,
					"name":"mouse"
				},
				{
					"id":1105,
					"name":"bird"
				},


			],

			//若想往对象添加键值对，使视图发生改变，可以用vue中的set方法
			//如可以：Vue.set(vm.userInfo, "要添加的键名"，"要添加的值")

			//也可以应用实例改变，如vm.$set(vm.userInfo, "要添加的键名"，"要添加的值")

			userInfo:{
			name:"feixia",
			age:"20",
			gender:"female",
			salary:"secret"
			}
		}
		

		
		
		

	})



		
</script>
</html>